<template>
  <div>
  <el-descriptions class="margin-top" size="mini" border>
      <el-descriptions-item label="姓名" :span="3" label-class-name="my-label">
        {{ info['name'] }}
      </el-descriptions-item>
      <el-descriptions-item label="身份证" label-class-name="my-label">
        {{ info['id_card'] }}
      </el-descriptions-item>
      <el-descriptions-item label="年龄" label-class-name="my-label">
        {{ info['age'] }}
      </el-descriptions-item>
      <el-descriptions-item label="性别" label-class-name="my-label">
        <span v-if="info['sex'] == 1">男</span>
        <span v-if="info['sex'] == 2">女</span>
      </el-descriptions-item>
      <el-descriptions-item label="联系电话" label-class-name="my-label">
        {{ info['mobile'] }}
      </el-descriptions-item>
      <el-descriptions-item label="就诊时间" :span="3" label-class-name="my-label">
        {{ info['time'] ? unixToDate(info['time']) : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="疾病" :span="3" label-class-name="my-label">
        <!-- {{ info['illness'] }} -->
        <el-checkbox-group v-model="illness">
           <el-checkbox v-for="(item,index) in illnessList" :label="item.id" :key="index">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>


      <el-descriptions-item label="医师" :span="3" label-class-name="my-label">
        {{ info['doc_name'] }}
      </el-descriptions-item>

      <el-descriptions-item label="医嘱" :span="3" label-class-name="my-label">
        {{ info['msg'] }}
      </el-descriptions-item>

      <el-descriptions-item label="老人病史" :span="3" label-class-name="my-label">
        {{ info['bingshi'] }}
      </el-descriptions-item>

      <el-descriptions-item label="老人症状" :span="3" label-class-name="my-label">
        {{ info['zhengzhuang'] }}
      </el-descriptions-item>

      <el-descriptions-item label="治疗方案" :span="3" label-class-name="my-label">
        {{ info['fangan'] }}
      </el-descriptions-item>

      <el-descriptions-item label="注意事项" :span="3" label-class-name="my-label">
        {{ info['zhuyi'] }}
      </el-descriptions-item>

      <el-descriptions-item label="处方有效期" :span="3" label-class-name="my-label">
        {{ info['youxiao'] }}
      </el-descriptions-item>

      <el-descriptions-item label="备注" :span="3" label-class-name="my-label">
        {{ info['note'] }}
      </el-descriptions-item>


      <el-descriptions-item label="所用药品">
        <div v-for="(item,index) in note" :key="index">
           <div style="padding-left: 50px;">
              <el-checkbox checked> {{ item.title }}</el-checkbox>
           </div>
           <el-form label-position="right" label-width="100px" ref="form" :rules="rules" :model="form">
           <el-row>
             <el-col :span="12">
               <el-form-item label="数量:" style="margin-bottom: 0px;">
                 {{ item.num }} {{ item.unit }}
               </el-form-item>
             </el-col>
             <el-col :span="12" >
               <el-form-item label="规格:" style="margin-bottom: 0px;">
                  <div style="height: 33px;"> {{ item.spec }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="药品类型:" style="margin-bottom: 0px;">
                 {{ item.use_type }}
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="服用方法:" style="margin-bottom: 0px;">
                 {{ item.func }}
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="每次用量:" style="margin-bottom: 0px;">
                 {{ item.use_num }}
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="次数" style="margin-bottom: 0px;">
                 {{ item.use_times }}
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="服药时间:" style="margin-bottom: 0px;">
                 {{ item.qianhou }}
               </el-form-item>
             </el-col>
           </el-row>
           </el-form>
        </div>
      </el-descriptions-item>
  </el-descriptions>
    <div class="contacts-add" style="padding-top: 10px;">
      <!-- <el-button type="primary" @click="onSubmit">提交</el-button> -->
      <el-button @click="cancle">关闭</el-button>
    </div>
</div>
</template>

<script>
import * as APIMedicalCareDisease from '@/api/medicalCareDisease';
import { unixToDate } from "@/utils";
export default {
  name: 'visit-info',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: {
  },
  data () {
    return {
      unixToDate:unixToDate,
      form: {},
      loading: false,
      ruleForm:{},
      info:{},
      note:[],
      illnessList:[],
      illness:[],
      totalPrice: 0,
      // 表单校验
      rules: {
      }
    }
  },
  mounted () {
     // this.medicineGetarr()
  },
  methods: {
    getGiuzhenjiInfo(id){
      const self = this;
      self.totalPrice = 0;
      APIMedicalCareDisease.jiuzhenmanInfo({ id: id }).then((resp) => {
        if(resp.code == 200){
          const illness = resp.data['illness'];
          const info = resp.data['info'];
          self['illnessList'] = illness
          self['info'] = info;
          self['note'] = info['medicine'];
          self['illness'] = info['illness'].split(',')
          info['medicine'].forEach(item =>{
            self.totalPrice += item['num'] * item['price']
          })
          self['illnessList'].forEach(item =>{
            item['id'] = String(item['id']);
          })
        }
      }).finally(() => {
        this.loading = false
      });
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        if(newval.hasOwnProperty('id')){
           this.getGiuzhenjiInfo(newval['id'])
           this.form = { ...newval };
        }
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
.contacts-add {
  text-align: right;
}
.contract-text {
  font-size: 12px;
  color: #999;
  line-height: 12px;
  margin: 0;
}
.contract-img {
  width: 146px;
  height: 146px;
  cursor: pointer;
}
.my-label{
  width: 100px;
}
</style>
